const path =require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const  {CleanWebpackPlugin}=require('clean-webpack-plugin')
const  MiniCssExtractPlugin=require('mini-css-extract-plugin')

module.exports={
    mode:"development",
    entry:"./src/index.jsx",
    output:{
        filename:"[name].[contenthash:8].js",
        path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.jsx$/,
                exclude:/node_modules/,
                loader:"babel-loader"
            },
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,"css-loader"]
            }
        ]
    },
    devServer:{
        compress:true,
        port:3000
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename:'[name].[contenthash:8].css'
        })
    ]
}